"use client"

import { useState, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Modal, Pressable, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import { Check } from "lucide-react-native"

// 课本数据结构
interface Book {
    id: string
    name: string
    units: Unit[]
}

// 单元数据结构
interface Unit {
    id: string
    name: string
}

interface CollectionModalProps {
    visible: boolean
    onClose: () => void
    onConfirm: (selectedUnitId: string, bookId: string) => void
}

// 模拟数据
const BOOKS_DATA: Book[] = [
    {
        id: "book1",
        name: "人教版英语",
        units: [
            { id: "book1_unit1", name: "Unit 1" },
            { id: "book1_unit2", name: "Unit 2" },
            { id: "book1_unit3", name: "Unit 3" },
            { id: "book1_unit4", name: "Unit 4" },
        ],
    },
    {
        id: "book2",
        name: "外研社英语",
        units: [
            { id: "book2_unit1", name: "Module 1" },
            { id: "book2_unit2", name: "Module 2" },
            { id: "book2_unit3", name: "Module 3" },
        ],
    },
    {
        id: "book3",
        name: "牛津英语",
        units: [
            { id: "book3_unit1", name: "Chapter 1" },
            { id: "book3_unit2", name: "Chapter 2" },
            { id: "book3_unit3", name: "Chapter 3" },
            { id: "book3_unit4", name: "Chapter 4" },
            { id: "book3_unit5", name: "Chapter 5" },
        ],
    },
    {
        id: "book4",
        name: "新概念英语",
        units: [
            { id: "book4_unit1", name: "Lesson 1-10" },
            { id: "book4_unit2", name: "Lesson 11-20" },
            { id: "book4_unit3", name: "Lesson 21-30" },
            { id: "book4_unit4", name: "Lesson 31-40" },
        ],
    },
]

export function CollectionModal({ visible, onClose, onConfirm }: CollectionModalProps) {
    const [selectedBookId, setSelectedBookId] = useState<string | null>(null)
    const [selectedUnitId, setSelectedUnitId] = useState<string | null>(null)
    const [units, setUnits] = useState<Unit[]>([])

    // 当选择的书本变化时，更新单元列表
    useEffect(() => {
        if (selectedBookId) {
            const selectedBook = BOOKS_DATA.find((book) => book.id === selectedBookId)
            if (selectedBook) {
                setUnits(selectedBook.units)
                // 清除之前选择的单元
                setSelectedUnitId(null)
            }
        } else {
            setUnits([])
            setSelectedUnitId(null)
        }
    }, [selectedBookId])

    const handleBookSelect = (bookId: string) => {
        setSelectedBookId(bookId)
    }

    const handleUnitSelect = (unitId: string) => {
        setSelectedUnitId(unitId)
    }

    const handleConfirm = () => {
        if (selectedBookId && selectedUnitId) {
            onConfirm(selectedUnitId, selectedBookId)
            resetSelections()
        }
    }

    const resetSelections = () => {
        setSelectedBookId(null)
        setSelectedUnitId(null)
        setUnits([])
    }

    const handleClose = () => {
        resetSelections()
        onClose()
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={handleClose}>
            <View style={styles.overlay}>
                <Pressable style={styles.backdrop} onPress={handleClose} />
                <View style={styles.content}>
                    <Text style={styles.title}>选择收藏位置</Text>

                    <View style={styles.selectionContainer}>
                        {/* 左侧：课本列表 */}
                        <View style={styles.booksColumn}>
                            <Text style={styles.columnTitle}>课本</Text>
                            <ScrollView style={styles.scrollList} showsVerticalScrollIndicator={false}>
                                {BOOKS_DATA.map((book) => (
                                    <TouchableOpacity
                                        key={book.id}
                                        style={[styles.bookItem, selectedBookId === book.id && styles.selectedItem]}
                                        onPress={() => handleBookSelect(book.id)}
                                    >
                                        <Text
                                            style={[styles.bookName, selectedBookId === book.id && styles.selectedItemText]}
                                            numberOfLines={2}
                                        >
                                            {book.name}
                                        </Text>
                                        {selectedBookId === book.id && (
                                            <View style={styles.checkContainer}>
                                                <Check size={12} color={theme.colors.neutral.white} strokeWidth={3} />
                                            </View>
                                        )}
                                    </TouchableOpacity>
                                ))}
                            </ScrollView>
                        </View>

                        {/* 右侧：单元列表 */}
                        <View style={styles.unitsColumn}>
                            <Text style={styles.columnTitle}>单元</Text>
                            {selectedBookId ? (
                                <ScrollView style={styles.scrollList} showsVerticalScrollIndicator={false}>
                                    {units.map((unit) => (
                                        <TouchableOpacity
                                            key={unit.id}
                                            style={[styles.unitItem, selectedUnitId === unit.id && styles.selectedItem]}
                                            onPress={() => handleUnitSelect(unit.id)}
                                        >
                                            <Text style={[styles.unitName, selectedUnitId === unit.id && styles.selectedItemText]}>
                                                {unit.name}
                                            </Text>
                                            {selectedUnitId === unit.id && (
                                                <View style={styles.checkContainer}>
                                                    <Check size={12} color={theme.colors.neutral.white} strokeWidth={3} />
                                                </View>
                                            )}
                                        </TouchableOpacity>
                                    ))}
                                </ScrollView>
                            ) : (
                                <View style={styles.emptyUnitsContainer}>
                                    <Text style={styles.emptyText}>请先选择课本</Text>
                                </View>
                            )}
                        </View>
                    </View>

                    <View style={styles.actions}>
                        <TouchableOpacity style={styles.cancelButton} onPress={handleClose}>
                            <Text style={styles.cancelButtonText}>取消</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.confirmButton, (!selectedBookId || !selectedUnitId) && styles.disabledButton]}
                            onPress={handleConfirm}
                            disabled={!selectedBookId || !selectedUnitId}
                        >
                            <Text style={styles.confirmButtonText}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    content: {
        width: "90%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xl,
        maxHeight: "80%",
    },
    title: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        textAlign: "center",
        marginBottom: theme.spacing.xl,
    },
    selectionContainer: {
        flexDirection: "row",
        marginBottom: theme.spacing.xl,
        height: 300,
    },
    booksColumn: {
        flex: 1,
        marginRight: theme.spacing.md,
    },
    unitsColumn: {
        flex: 1,
        marginLeft: theme.spacing.md,
    },
    columnTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.md,
        textAlign: "center",
    },
    scrollList: {
        flex: 1,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.lightGray,
        padding: theme.spacing.sm,
    },
    bookItem: {
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.white,
        marginBottom: theme.spacing.sm,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },
    unitItem: {
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.white,
        marginBottom: theme.spacing.sm,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },
    selectedItem: {
        backgroundColor: theme.colors.primary.default,
    },
    bookName: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        flex: 1,
    },
    unitName: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    selectedItemText: {
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
    checkContainer: {
        width: 18,
        height: 18,
        borderRadius: 9,
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing.sm,
    },
    emptyUnitsContainer: {
        flex: 1,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
        justifyContent: "center",
    },
    emptyText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        fontStyle: "italic",
    },
    actions: {
        flexDirection: "row",
        gap: theme.spacing.md,
    },
    cancelButton: {
        flex: 1,
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
    },
    confirmButton: {
        flex: 1,
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
    },
    disabledButton: {
        backgroundColor: theme.colors.neutral.gray,
        opacity: 0.5,
    },
    cancelButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },
})

